<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 100px;
		}
		.red {
			background: red;
		}
		.green {
			background: green;
		}
	</style>
</head>
<body>

	<div class="red" id="red">
		
	</div>
	<!-- 第三种，会被 元素.onclick 覆盖，不会被addEventListener 覆盖 -->
	<div class="green" id="green" onclick="console.log('我是发生在元素行内上')"></div>

	<script type="text/javascript">
		var red = document.getElementById('red')
		var green = document.getElementById('green')
		/*
			事件: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理
			
			元素对象.on+事件名 = function() {}

		 */
		
		red.onclick = function() {
			console.log('click')
		}

		red.onmousedown = function() {
			console.log('鼠标按下')
		}

		red.onmouseup = function() {
			console.log('鼠标弹起')
		}

		red.onmousemove = function() {
			console.log('鼠标进入')
		}

		red.onmouseout = function( ){
			console.log('鼠标移出')
		}

		// 事件绑定方式
		// 第一种写法
		green.onclick = function() {
			console.log('onclick1')
		}
		green.onclick = function() {
			// 后面会覆盖前面
			console.log('onclick2')
		}

		// 第二种
		green.addEventListener('click', function() {
			console.log('addEventListener1')
		})
		green.addEventListener('click', function() {
			console.log('addEventListener2')
		})
		// 两次都有
		

	</script>
</body>
</html>